import React, { Component,PropTypes } from 'react';
import {Link} from 'react-router';
import {WechatAuth} from '../../Action/autoLogin'
import Carousel from '../CommonComponent/Carousel'
import Split from '../CommonComponent/Split'
import Footer from '../CommonComponent/Footer'
import TitleClassify from '../CommonComponent/TitleClassify'
import '../../Stylesheets/wx/sm.min.css'
import '../../Stylesheets/wx/personalCenter.css'
import {saveToken,loadToken,GetQueryString,getToken,axs} from '../../Action/rpc';
import {WxLogin,MyInfo,BannerList,imei} from '../../Action/auth';
import $ from 'jquery';

const imgList = [{picture_url:require('../../Images/Index/banner1.png')},{picture_url:require('../../Images/Index/banner2.jpg')}]
export default class Index extends Component {
    static contextTypes = {
        router:PropTypes.object
    }

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            name:'',
            img:'',
            agentName:'',
            stepName:'',
            hideHeight:0,
            isActive:'',
            grade:'',
            marHeight:180,
            bannerHeight:0,
            banner:[],
            STATUS:0,
            bindModal:false
        };
        this.percent=0;
    }

    async componentWillMount() {
        if(GetQueryString('code') && !loadToken()){
            await this.getLoginToken()
            //await this.getLoginToken(GetQueryString('code'))
        }
        await this.getMyInfo();
        if(this.state.grade>0 && this.state.isActive ==1){
            alert('申请代理成功，请前往进货')
            this.context.router.push({pathname:'/purchase'})
        }
        if(this.state.STATUS==1){
            let upTotal = localStorage.getItem('upTotal')
            let upGrade = localStorage.getItem('upGrade')
            alert('代理升级中，请继续升级')
            this.context.router.push({pathname:'/rechargeFirst',query:{total:upTotal,grade:upGrade,judgeup:0}})
        }
        /*await this.upCheck();
        if(this.state.grade>0 && this.state.isActive ==1){
            alert('申请代理成功，请前往进货')
            this.context.router.push({pathname:'/purchase'})
        }*/
        await this.getHomeBanner()
    }

    async getHomeBanner(){
        await BannerList('BANNER',0,10)
            .then(res=>{
                this.setState({banner:res});
                this.setState({marHeight: $('#banner').height()});
                this.setState({bannerHeight: $('#banner').height()});
            })
            .catch(err=>{
                console.warn('BANNER',err)
            })
    }

    async getMyInfo(){
        await MyInfo()
            .then(res=>{
                this.setState({isActive:res.IS_ACTIVE});
                this.setState({grade:res.AGENT_GRADE});
                this.setState({STATUS:res.STATUS});
                sessionStorage.setItem('myAgent',res.AGENT_GRADE);
                /*判断是否绑定手机号*/
                /*if(res.ACC_NAME =='' || res.ACC_NAME == null || res.ACC_NAME == 'null'){
                    this.setState({bindModal:true})
                }*/
            })
            .catch(err=>{
                alert(err.message)
                console.warn('BANNER',err)
            })
    }

 /*   async upCheck(){
        await UpgradeCheck()
            .then(res=>{
                //this.setState({isActive:res.IS_ACTIVE});
                console.log(res)
            })
            .catch(err=>{
                alert(err.message)
                console.warn('BANNER',err)
            })
    }*/

    componentDidMount(){
        //alert($('#banner').height())
        //this.setState({marHeight: $('#banner').height()});
        //this.setState({bannerHeight: $('#banner').height()});
        //$('#containerNav').css({marginTop : $('#banner').height() })
    }

    async getLoginToken(){
        await WxLogin(GetQueryString('code'))
            .then(res=>{
                const token = res.token;
                sessionStorage.setItem('openId',res.openId)
                saveToken(token)
            })
            .catch(err=>{
                alert(err.message)
                console.log(err)
            })
    }

    touchStart(){
        //调整数据，避免scroll的延时
        this.setState({marHeight: 0,hideHeight:this.state.bannerHeight});
        this.percent = parseFloat($('.containerNav').scrollTop()/$('#banner').height()).toFixed(2);
        //if(this.percent>1){this.percent=1}
        $('#bannerHide').css({background:'#000',opacity:this.percent})
    }

    scroll() {
        if ($('.containerNav').scrollTop() > 0) {
            //设置containerNav的marginTop与bannerHide的高度
            this.setState({marHeight: 0,hideHeight:this.state.bannerHeight});
            //设置透明度
            this.percent = parseFloat($('.containerNav').scrollTop()/$('#banner').height()).toFixed(2);
            //if(this.percent>1){this.percent=1}
            $('#bannerHide').css({background:'#000',opacity:this.percent})
        }else{
            //设置containerNav的marginTop与bannerHide的高度
            this.setState({marHeight: this.state.bannerHeight,hideHeight:0 });
        }
    }

    apply(){
        this.context.router.push({pathname:'/authorization'})
    }

    toBindNum(){
        this.context.router.push({pathname:'/bindPhoneNum'})
    }


    render(){
        const {hideHeight,marHeight,banner,bindModal}=this.state;
        return(
            <div>
                <div id="banner" className="bannerPos">
                    <Carousel
                        images = {banner}
                    />
                </div>
                <div className="containerNav" style={{top:0,zIndex:10,marginTop:marHeight}}
                     onScroll={()=>this.scroll()}
                     onTouchStart={()=>this.touchStart()}
                >

                    <div id="contentMoudle">
                        <div id="bannerHide" style={{height:hideHeight}}></div>
                        <div className="width100" style={{padding:'35px 20px 0',background:"#fff"}}>
                            <div style={{marginBottom:15}}>
                                <img src={require('../../Images/Index/about.png')} alt=""/>
                            </div>
                            <div className="f16" style={{color:'#333',marginBottom:22,fontWeight:'bold'}}>关于维魅力</div>
                            <p className="f14 color6">作为首个面世的“维魅力”微电商平台APP将突破传统微商运营（家庭式）形式，全面融合多家成功微商品牌的奖励机制并有效规避行业中各级别的代理痛点，以集团23年专业美容院线的国内外技术平台背景为依托，结合传统电商规范化线上运营平台，将全力打造颠覆行业的首个美业微商APP平台。
                                <br/>“维魅力”专注于美丽与健康领域，通过移动互联网时代帮助传统美业实现双轨制的O2O化运营。是移动互联网时代的美业服务商，向广大的爱美女性提供美丽资讯、美容话题、在线预约、美丽分享的社交互动服务，打造互联网美丽平台。
                            </p>
                            <div
                                className="parentCenter"
                                style={{width:280,height:70,lineHeight: '70px',color:'#333',fontSize:28,margin:'30px auto 0',border:'2px solid #333'}}
                                // onClick = {()=>this.setState({isCancel:true,ordernum:el.order_no})}
                            >
                                <span className="vAlign tc">探索 # 维魅力</span>
                            </div>

                        </div>

                        <div className="width100" style={{padding:'20px 20px 0',background:"#fff"}}>
                            <div style={{marginBottom:15}}>
                                <img src={require('../../Images/Index/agent.png')} alt=""/>
                            </div>
                            <div className="f16" style={{color:'#333',marginBottom:22,fontWeight:'bold'}}>代理品牌</div>
                            <p className="f14 color6">跨界第一微商品牌——思幕<br/>
                                思幕是一个将科技与专业 ，品质与创新，功效与低价完美结合的综合性定位的电商品牌，融合国际上身体与皮肤的全新理念，打造一个适合70-90后的“快”时尚精准定位的护肤品牌！该品牌依托广州暨南大学医药技术中心，英国，美国，台湾，日本为技术支持，以科技为核心，效果为灵魂，精准定位皮肤核心问题，真正实现科技缔造奇迹的行业突破！
                            </p>
                            {/*<div
                                className="parentCenter border_4"
                                style={{width:280,height:70,lineHeight: '70px',fontSize:28,margin:'30px auto 0'}}
                                // onClick = {()=>this.setState({isCancel:true,ordernum:el.order_no})}
                            >
                                <span
                                    className="vAlign tc"
                                    style={{background:'#fa6b5b',color:'#fff'}}
                                >代理 # 品牌</span>
                            </div>*/}
                            <div
                                className="parentCenter"
                                style={{width:280,height:70,lineHeight: '70px',color:'#333',fontSize:28,margin:'30px auto 0',border:'2px solid #333'}}
                                // onClick = {()=>this.setState({isCancel:true,ordernum:el.order_no})}
                            >
                                <span className="vAlign tc">代理 # 品牌</span>
                            </div>
                        </div>

                        <div className="width100" style={{padding:'20px 20px 0',background:"#fff"}}>
                            <div style={{marginBottom:15}}>
                                <img src={require('../../Images/Index/join.png')} alt=""/>
                            </div>
                            <div className="f16" style={{color:'#333',marginBottom:22,fontWeight:'bold'}}>加入我们</div>
                            <p className="f14 color6">上海合维信息科技发展有限公司隶属于上海暨轩国际，作为23年美业巨头的暨轩国际在2017年跨界互联网，实力进军微电商及教育板块领域！上海合维信息科技发展有限公司是一家融合互联网科技、信息技术与生物科技服务的互联网+的新型企业。公司2017年开发运营的“维魅力”APP正式上线，全力打造颠覆行业的首个美业微商APP平台。
                                <br/>致臻至美，以匠心感动人心；上海合维诚邀您加入，携手共创双赢。</p>
                            <div
                                className="parentCenter border_4"
                                style={{width:280,height:70,lineHeight: '70px',fontSize:28,margin:'30px auto 0'}}
                                // onClick = {()=>this.setState({isCancel:true,ordernum:el.order_no})}
                            >
                                <span className="vAlign tc"
                                      style={{background:'#fa6b5b',color:'#fff'}}
                                      onClick={()=>this.apply()}
                                >成为代理</span>
                            </div>
                        </div>
                    </div>
                    <div style={{height:50}}></div>
                </div>
                <Footer
                    index = {0}
                />
                <div className="pf" style={{top:180,right:0,width:60,zIndex:10}}>
                    <a className="di" style={{width:60,height:80}} href={`tel:${'4001562006'}`}>
                        <img src={require('../../Images/Index/contact.png')} alt=""/>
                    </a>
                </div>
                {
                    bindModal?
                        <div className="modalBar pf width100 height100 f14">
                            <div className="modal_body border_4 scale">
                                <div className="paddingtb border_bottom tc">{'绑定手机号'}</div>
                                <div style={{height:40,lineHeight:'40px'}}>
                                    <button className="width100 border_right colorlv bkr_Tr borderno"
                                            onClick = {()=>this.toBindNum()}
                                    >确定</button>
                                </div>
                            </div>
                        </div>
                        :null
                }
            </div>
        )
    }
}
